{extend name="public/base"/}

{block name="body"}
<div class="row">
  <div class="col-md-4 col-sm-12 col-xs-12 col-md-offset-4">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li class="layui-this">登入</li>
        <li><a href="{:url('user/login/register')}">注册</a></li>
      </ul>
      <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">

          <form class="layui-form layui-form-pane" action="{:request()->url()}" method="post">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-block">
                <input name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input" type="text" lay-verify="required">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-block">
                <input name="password" autocomplete="off" placeholder="请输入密码" class="layui-input" type="password" lay-verify="required">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">验证码</label>
              <div class="layui-input-block">
                <input name="verify" autocomplete="off" placeholder="请输入验证码" class="layui-input" type="text">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="controls verifyimg">
                {:captcha_img()}
              </div>
            </div>
            <div class="layui-form-item">
              <button class="btn btn-success col-md-12 col-sm-12 col-xs-12" lay-submit="" lay-filter="formLogin">登入</button>
            </div>
          </form>

        </div>
        <div class="layui-tab-item"></div>
      </div>
    </div>
  </div>
</div>
{/block}

{block name="side"} {/block}
{block name="script"}
<style>
  .verifyimg img{
    width: 100%;
  }
</style>
<script type="text/javascript">
    $("form").submit(function(){
        var self = $(this);
        $.post(self.attr("action"), self.serialize(), success, "json");
        return false;

        function success(data){
            if(data.code){
                layer_success(data.msg);
                setTimeout(function(){
                    window.location.href = data.url;
                },1500);
            } else {
                layer_error(data.msg);
                //刷新验证码
                $(".verifyimg img").click();
            }
        }
    });
    $(function(){
        //刷新验证码
        var verifyimg = $(".verifyimg img").attr("src");
        $(".verifyimg img").click(function(){
            if( verifyimg.indexOf('?')>0){
                $(".verifyimg img").attr("src", verifyimg+'&random='+Math.random());
            }else{
                $(".verifyimg img").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
            }
        });
    });
</script>
{/block}
